<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item 
      v-for="item in breadcrumbs" 
      :key="item.path"
    >
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'PageBreadcrumb',
  data() {
    return {
      breadcrumbs: []
    }
  },
  watch: {
    $route: {
      handler(to) {
        this.getBreadcrumb(to)
      },
      immediate: true
    }
  },
  methods: {
    isLast(index) {
      return index === this.breadcrumbs.length - 1
    },
    getBreadcrumb(route) {
      // 只使用有名称的路由
      let matched = route.matched.filter(item => item.name)
      
      // 根据路由名称设置面包屑
      this.breadcrumbs = matched.map(item => {
        let name = item.name
        
        // 给路由名称添加中文映射
        switch (item.name) {
          case 'dashboard':
            name = '首页'
            break
          case 'users':
            name = '用户管理'
            break
          case 'userList':
            name = '用户列表'
            break
          case 'userRoles':
            name = '角色管理'
            break
          case 'products':
            name = '商品管理'
            break
          case 'productList':
            name = '商品列表'
            break
          case 'productCategory':
            name = '商品分类'
            break
          case 'sales':
            name = '销售管理'
            break
          case 'orderList':
            name = '订单列表'
            break
          case 'salesAnalysis':
            name = '销售分析'
            break
          case 'monthly':
            name = '月度销售'
            break
          case 'analysis':
            name = '销售分析'
            break
          case 'inventory':
            name = '库存管理'
            break
          case 'inventoryStatus':
            name = '库存状态'
            break
          case 'storageView':
            name = '库存操作'
            break
          case 'operation':
            name = '库存操作'
            break
          case 'adjustment':
            name = '库存操作'
            break
          case 'in':
            name = '入库管理'
            break
          case 'out':
            name = '出库管理'
            break
          case 'alert':
            name = '库存预警'
            break
          default:
            // 将"home"替换为空字符串，只展示中文名称
            name = item.name === 'home' ? '' : item.name
        }
        
        return {
          path: item.path,
          name
        }
      })

      // 过滤掉空名称的项目
      this.breadcrumbs = this.breadcrumbs.filter(item => item.name !== '')
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  font-size: 14px;
  line-height: 60px;
}
</style> 